<template>
  <div>
    <!--immediate-check 是否在初始化时立即执行滚动位置检查 -->
    <van-list
      v-model="loading"
      :finished="finished" 
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
      <commentItem v-for="(item,index) in list" :key="index" :comment="item" @hf="$emit('hf',$event)" />
    </van-list>
  </div>
</template>

<script>
import { getComments } from "@/api/article.js";
import commentItem from './comment-item.vue'
export default {
  data() {
    return {
      loading: false,
      finished: false,
      offset:null,
      limit:10,
    };
  },
  components:{commentItem},
  props: {
    CommentId: {
      type: [Number, String, Object],
      required: true,
    },
    list:{
      type:Array,
      default:()=>[]
    },
    type:{
      type:String,
      validator (value) { 
       return ['a', 'c'].includes(value)  //校验传值是否为a-c 否则type类型错误
     },
      default:'a'
    }
  },
  created(){
    this.loading =true
    this.onLoad()
  },
  methods: {
  async onLoad() {
      try {
  const {data} =await getComments({
    type:this.type, //  评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
    source:this.CommentId.toString(), /* 文章id或评论id */
    offset:this.offset,
    limit:this.limit,  //获取的评论数据个数
  })
    const {results} =data.data
    this.list.push(...results)
/*     console.log(results); */
    // 把文章评论的总数量传递给外部
  this.$emit('onload-success', data.data)
    this.loading =false
    if(results.length){
    this.offset = data.data.last_id
    }else{
      this.finished =true
    }
        } catch (error) {
          this.loading = false
      }
    },
  },
};
</script>

<style>
</style>